<template>
  <div style="background-color: #f5f5f5">
    <product-navbar titleText="科研机构" subtitleText="有需求、找资源、寻合作,平台致力于为供、需双方提供一个流畅、专业的需求对接交互平台"/>
    <product-select type="kyjg"></product-select>

    <!-- 科研机构列表 -->
    <div class="company-list-container">
      <div class="company-grid">
        <div v-for="(company, index) in paginatedData" :key="index" class="company-card">
          <div class="company-icon">
            <img :src="company.icon" alt="公司图标">
          </div>

          <!-- 公司信息 -->
          <div class="company-info">
            <div class="company-name">{{ company.name }}</div>
            <div class="company-desc">{{ company.description }}</div>
          </div>
        </div>
      </div>

      <!-- 分页组件 -->
      <div class="pagination-wrapper">
        <el-pagination
            background
            layout="prev, pager, next, sizes, total"
            :total="companyData.length"
            :page-size="pageSize"
            :current-page="currentPage"
            :page-sizes="[9, 18, 27, 36]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <contact-footer></contact-footer>
  </div>
</template>

<script>
import ProductNavbar from "@/view/productEmpowerment/model/productNavbar.vue";
import ProductSelect from "@/view/productEmpowerment/model/productSelect.vue";
import ContactFooter from "@/view/homeComponents/banner.vue";

export default {
  components: {
    ContactFooter,
    ProductNavbar,
    ProductSelect
  },
  data() {
    return {
      companyData: [
        {
          icon: require('@/assets/productEmpowerment/zgxxtxyjy.jpg'),
          name: '中国信息通信研究院',
          description: '专注于人工智能和大数据技术研发，为企业提供智能化解决方案',
          premium: true
        },
        {
          icon: require('@/assets/productEmpowerment/zgxxtxyjy.jpg'),
          name: '中国信息通信研究院',
          description: '专业的数字营销服务提供商，帮助企业在数字时代实现品牌增长',
          premium: false
        },
        {
          icon: require('@/assets/productEmpowerment/zgxxtxyjy.jpg'),
          name: '中国信息通信研究院',
          description: '新能源技术研发与应用，提供可持续的能源解决方案',
          premium: true
        },
        {
          icon: require('@/assets/productEmpowerment/zgxxtxyjy.jpg'),
          name: '中国信息通信研究院',
          description: '为金融机构提供创新的技术解决方案和咨询服务',
          premium: false
        },
        {
          icon: require('@/assets/productEmpowerment/zgxxtxyjy.jpg'),
          name: '中国信息通信研究院',
          description: '企业级云计算服务提供商，助力企业数字化转型',
          premium: true
        },
        {
          icon: require('@/assets/productEmpowerment/zgxxtxyjy.jpg'),
          name: '中国信息通信研究院',
          description: '工业4.0解决方案提供商，推动制造业智能化升级',
          premium: false
        },
        {
          icon: require('@/assets/productEmpowerment/zgxxtxyjy.jpg'),
          name: '中国信息通信研究院',
          description: '专注于创新药物研发和生物技术应用的高科技企业',
          premium: true
        },
        {
          icon: require('@/assets/productEmpowerment/zgxxtxyjy.jpg'),
          name: '中国信息通信研究院',
          description: '提供智慧城市整体解决方案，推动城市数字化发展',
          premium: false
        },
        {
          icon: require('@/assets/productEmpowerment/zgxxtxyjy.jpg'),
          name: '中国信息通信研究院',
          description: '为企业提供全方位的电子商务解决方案和运营支持',
          premium: true
        }
      ],
      currentPage: 1,
      pageSize: 9
    }
  },
  computed: {
    // 计算分页后的数据
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.companyData.slice(start, end);
    }
  },
  methods: {
    // 每页条数变化
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; // 重置到第一页
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
}
</script>

<style scoped>
.company-list-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 15px 15px;
  background-color: #ffffff;
}

.company-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.company-card {
  position: relative;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 220px;
}

.company-icon {
  width: 200px;
  height:130px;
  margin-bottom: 15px;
}

.company-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.company-info {
  width: 100%;
}

.company-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  font-family: '黑体', sans-serif;
}

.company-desc {
  font-size: 13px;
  color: #999;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 分页样式 */
.pagination-wrapper {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* 调整分页组件样式 */
.el-pagination {
  padding: 10px 0;
}

.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #409eff;
  color: #fff;
}

@media (max-width: 992px) {
  .company-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .company-grid {
    grid-template-columns: 1fr;
  }

  /* 移动端分页调整 */
  .pagination-wrapper {
    overflow-x: auto;
    padding-bottom: 10px;
  }
}
</style>